<template>
  <el-card style="padding-bottom: 300px" v-loading="data.loading">
    <el-descriptions title="系统信息" :column="3" border size="large" extra="👍" class="custom-description">
        <el-descriptions-item
            label="系统名称"
            label-align="center"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="200px"
        >
        <el-tag size="large" effect="dark" type="primary" >{{data.datalist.sysName}}   </el-tag>
        </el-descriptions-item>
        <el-descriptions-item
            label="版本信息"
            label-align="center"
            align="center"
            width="200px"
            label-class-name="my-label"
            class-name="my-content">
          <el-tag size="large" effect="dark" type="primary">{{data.datalist.versionName}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="操作系统" label-align="center" align="center" width="200px"
            label-class-name="my-label"
            class-name="my-content">
                  <el-tag size="large" effect="dark" type="primary">  {{data.datalist.osName}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="系统平台" label-align="center"    align="center"  >
          <el-tag size="large" effect="dark" type="primary">{{data.datalist.pf}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="CPU核数" label-align="center"    align="center">
          <el-tag size="large" effect="dark" type="primary">{{data.datalist.cupCount}}</el-tag>
        </el-descriptions-item>
      <el-descriptions-item label="处理器" label-align="center"     align="center" >
        <el-tag size="large" effect="dark" type="primary">{{data.datalist.processor}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="CPU负载" label-align="center"    align="center"     label-class-name="my-label"
            class-name="my-content">
        <el-tag size="large" effect="dark" type="primary">{{data.datalist.cpuLoad}}%</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="系统内存" label-align="center"   align="center"     label-class-name="my-label"
            class-name="my-content">
        <el-tag size="large" effect="dark" type="primary">{{data.datalist.memory}}G</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="内存使用" label-align="center"    align="center"     label-class-name="my-label"
            class-name="my-content">
        <el-tag size="large" effect="dark" type="primary">{{data.datalist.usedMemory}}G</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="内存利用率" label-align="center"   align="center">
        <el-tag size="large" effect="dark" type="primary">{{data.datalist.percentMemory}}%</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="系统语言" label-align="center"    align="center" >
        <el-tag size="large" effect="dark" type="primary">{{data.datalist.sysLan}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="Java版本" label-align="center"   align="center">
        <el-tag size="large" effect="dark" type="primary">{{data.datalist.jvmVersion}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="系统时区" label-align="center"   align="center"   label-class-name="my-label"
            class-name="my-content">
        <el-tag size="large" effect="dark" type="primary">{{data.datalist.sysZone}}</el-tag>
      </el-descriptions-item>

    </el-descriptions>
  </el-card>
</template>


<script setup>

import {onMounted, reactive} from "vue";
import {sysInfoApi} from "@/api/sysInfo";

const data=reactive({
  loading:false,
  datalist:{},
})

onMounted(async () => {
  await startLoading();
  await getInfo();
})

const startLoading=()=>{
  data.loading=true;
  setTimeout(() => {
    data.loading = false;
  }, 1000);
}
const getInfo=(()=>{
  sysInfoApi().then(res=>{
    data.datalist=res.data
    console.log(data.datalist)
  })
})
</script>
<style scoped>
:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--el-color-danger-light-9);
}


</style>